<template>
  <div class="mainBoxT">
    <div class="headerButton">
      <n-button strong secondary type="primary" @click="clickBreak">
        刷新
      </n-button>

     
<div>
   <n-upload action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f" :headers="{
        'naive-info': 'hello!'
      }" :data="{
  'naive-data': 'cool! naive!'
}">
  <n-button strong secondary type="info" @click="clickUpload">
    点击上传
  </n-button>
  </n-upload>
</div>

      <n-button type="error" strong secondary @click="clickTest">
        测试弹窗组件
      </n-button>
    </div>

    <div class="imageGround">
      <n-image-group>
        <n-space>
          <div v-for="item in props.imageList" :key="item.id" class="ImageItem" v-on:contextmenu="handleShowContextMenu">
            <n-tooltip placement="bottom" trigger="hover">
              <template #trigger>
                <div>
                  <n-image width="100" :src="item.url" />
                  <div class="deleteItem">
                    <div class="ImageName">{{ item.name }}</div>
                  </div>
                </div>
              </template>
              <span> {{ item.name }} </span>
            </n-tooltip>
          </div>
        </n-space>
      </n-image-group>
    </div>
  </div>

  <popup v-model="handleShow"></popup>
  <!-- <test v-model="handleShow"></test> -->
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import emitter from "@/utils/mitt";
import { NIcon, useMessage, useDialog, NEllipsis } from 'naive-ui'
import popup from "../../../../components/popup/index.vue"
import test from "../../../../components/popup/test.vue"

import { BookmarkOutline, Image, CloseOutline, Pencil, Add, Refresh } from '@vicons/ionicons5'
//@ts-ignore
import ContextMenu from "@imengyu/vue3-context-menu";
import { handleDleteImageItem } from "../../../../api/funAPI"

const props: any = defineProps({
  imageList: {
    type: Array
  }
})
const handleShow = ref(false)    // 控制那个弹窗组件显隐
const dialog = useDialog()
const message = useMessage()

// 点击刷新的回调
function clickBreak() {
  emitter.emit('refresh')
}

// 点击上传
const clickUpload = () => {

}

// 测试弹窗的显隐
const clickTest = () => {
  handleShow.value = true
}

// 鼠标右击事件
const handleShowContextMenu = (e: any) => {
  e.preventDefault();
  // 拿到url相同的数据
  const getData = props.imageList.find((item) => {
    if (item.url == e.target.src) {
      return item
    }
  })

  ContextMenu.showContextMenu({
    x: e.x,
    y: e.y,
    theme: "flat dark",
    items: [
      {
        label: "删除",
        onClick: () => {
          handleClick(getData)
        }
      },
    ],
  });
}

// 删除的回调
function handleClick(item) {
  dialog.warning({
    title: '提示',
    content: '此操作将会删除选择的数据，是否继续？',
    positiveText: '确定',
    negativeText: '不确定',
    onPositiveClick: () => {
      confirmDelete(item)
    },
    onNegativeClick: () => {
      // message.error('不确定')
    }
  })
}

// 确认删除的回调
const confirmDelete = async (item) => {
  const data = await handleDleteImageItem({ ids: [item.id] })
  console.log('data');
  if (data.code == 1000) {
    emitter.emit('refresh')
    message.success('删除成功')
  } else {
    message.error('删除失败')
  }
}

onMounted(() => {
  console.log('props', props);
})
</script>

<style lang="scss" scoped>
.mainBoxT {
  box-sizing: border-box;
  padding: 10px;

  // height: 70vh;
  .headerButton {
    display: flex;

    button {
      margin-right: 10px;
    }
  }

  .imageGround {
    // border: 1px solid red;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;

    .ImageItem {

      // border: 1px solid red;
      .deleteItem {
        width: 100%;
        height: 20px;
        // border: 1px solid red;
        display: flex;
        align-items: center;

        .ImageName {
          // width: 80%;
          width: 100px;
          height: 100%;
          // border-right: 1px solid gray;
          //border: 1px solid red;
          text-align: center;

          overflow: hidden;
          font-size: 12px;
          line-height: 20px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .deleteIcon {
          display: flex;
          align-items: center;
          // width: 20%;
          flex: auto;
          line-height: 20px;
          height: 100%;
          cursor: pointer;
          // border: 1px solid red;
        }

        .deleteIcon:hover {
          color: red;
        }
      }
    }
  }
}

// :deep(){
//   .n-image img{
//     // border: 1px solid white !important;
//   }
// }
</style>